<template>
    <div class="layout">
        <a-layout id="components-layout-demo-custom-trigger">
            <a-layout-sider v-model="collapsed" :trigger="null" collapsible width="256px">
                <div class="logo">
                    <img style="height: 28px;" src="https://preview.pro.antdv.com/assets/logo.f3103225.svg" alt="">
                    <div v-if="!collapsed">Ant Design Pro</div>
                </div>
                <a-menu :default-selected-keys="['workplace']" :default-open-keys="['workplace']" mode="inline"
                    theme="dark" :inline-collapsed="collapsed">

                    <template v-for="menu in menus">
                        <a-sub-menu :key="menu.path">
                            <span slot="title">
                                <a-icon :type="menu.icon" />
                                <span>{{menu.name}}</span>
                            </span>

                            <template v-for="subMenu in menu.children">
                                <a-menu-item :key="subMenu.path" @click="navigater(subMenu)">
                                    {{subMenu.name}}
                                </a-menu-item>
                            </template>
                            <!-- <a-menu-item key="9">
                                Option 9
                            </a-menu-item>
                            <a-menu-item key="10">
                                Option 10
                            </a-menu-item>
                            <a-sub-menu key="sub3" title="Submenu">
                                <a-menu-item key="11">
                                    Option 11
                                </a-menu-item>
                                <a-menu-item key="12">
                                    Option 12
                                </a-menu-item>
                            </a-sub-menu> -->
                        </a-sub-menu>
                    </template>

                </a-menu>
            </a-layout-sider>
            <a-layout>
                <a-layout-header style="background: #fff; padding: 0">
                    <div class="header">
                        <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                            @click="() => (collapsed = !collapsed)" />

                        <languageComponent></languageComponent>
                    </div>
                </a-layout-header>
                <a-layout-content
                    :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
                    <router-view></router-view>
                </a-layout-content>
            </a-layout>
        </a-layout>
    </div>
</template>

<script>
    import menus from '../utils/menu.data';
    import languageComponent from '../components/language-switch';

    export default {
        name: 'HelloWorld',
        components: {
            languageComponent,
        },
        data() {
            return {
                collapsed: false,
                menus,
            }
        },
        methods: {
            handleSubmit(e) {
                console.log(e);
                console.log(this.formInline);
            },
            navigater(item) {
                console.log(item)
                this.$router.push(item.path)
            }
        },
        mounted() {
            console.log(menus);
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    .layout {
        height: 100%;
    }

    #components-layout-demo-custom-trigger {
        height: 100%;
    }

    #components-layout-demo-custom-trigger .trigger {
        font-size: 18px;
        line-height: 64px;
        padding: 0 24px;
        cursor: pointer;
        transition: color 0.3s;
    }

    #components-layout-demo-custom-trigger .trigger:hover {
        color: #1890ff;
    }

    #components-layout-demo-custom-trigger .logo {
        height: 32px;
        color: #fff;
        margin: 16px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 20px;
    }

    .header {
        display: flex;
        padding-right: 30px;
        justify-content: space-between;
    }
</style>